<template>
    <div class="k-transfer">
        <div class="k-transfer-panel">
            <div class="k-transfer-item">
                <div class="k-transfer-title">
                    权限列表
                    <small>(共{{ policys.length }}条)</small>
                </div>
                <el-input v-model="search" placeholder="关键字搜索"/>

                <el-table ref="table"
                          :data="policysData"
                          :height="height"
                          v-loading="loading"
                          @row-click="onClickRowLeft"
                          @selection-change="onSelectionChange"
                >
                    <el-table-column type="selection"/>

                    <el-table-column prop="name" label="节点名"/>

                    <el-table-column prop="text" label="描述"/>
                </el-table>
            </div>
            <div class="k-transfer-item">
                <div class="k-transfer-title">
                    已选择
                    <small>({{ curPolicys.length }}条)</small>
                </div>

                <el-table :data="curPolicys" :height="height + 33">
                    <el-table-column prop="name" label="节点名"/>

                    <el-table-column prop="text" label="描述"/>

                    <el-table-column width="100" align="center">
                        <template v-slot="{ row }">
                            <span class="close-link el-icon-close"
                                  @click="onClickRemove(row)"
                                  title="移除"></span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { getPolicys } from '@/services/auth/policy.service';

@Component({ name: 'KTransfer' })
export default class KTransfer extends Vue {
    @Prop({ type: Number, default: 340 }) readonly height!: number;
    @Prop({ type: Array, required: true }) readonly value!: string[];
    policys: any[] = [];
    loading: boolean = true;

    search: string = '';
    searchFilter: string = '';
    timer: any;

    get policysData(): any[] {
        return this.policys.filter(e => {
            return e.name.includes(this.searchFilter)
                || e.text.includes(this.searchFilter);
        });
    }

    get curPolicys(): any[] {
        let value = this.value.map(node => {
            return this.policys.find(e => e.name === node);
        });

        return value;
    }

    mounted() {
        this.fetchPolicys();
    }

    fetchPolicys() {
        getPolicys()
            .finally(() => {
                this.loading = false;
            })
            .then(result => {
                this.policys = result.data.items;
            })
    }

    onClickRowLeft(row: any) {
        (this.$refs.table as any).toggleRowSelection(row);
    }

    @Watch('search')
    onSearchChange(val: string) {
        if (this.timer) {
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
            this.onSearchData(val);
        }, 500);
    }

    onSearchData(val: string) {
        this.searchFilter = val;
    }

    onSelectionChange(value: any[]) {
        this.$emit('input', value.map(e => e.name));
    }

    onClickRemove(row: any) {
        (this.$refs.table as any).toggleRowSelection(row);
    }
}
</script>

<style scoped lang="scss">
.k-transfer {
    border: solid 1px #DCDFE6;
    border-radius: 4px;
    &-panel {
        display: flex;
        height: 100%;
    }
    &-search {
        padding: 10px;
    }
    &-title {
        font-weight: bold;
        color: #333;
        small {
            color: #999;
        }
    }
    &-item {
        flex: 1;
        padding: 12px;
        overflow: auto;
        & + & {
            border-left: solid 1px #DCDFE6;
        }
    }
    .close-link {
        cursor: pointer;
    }
}
</style>
